<template>
  <view class="content">
	  <u-navbar :is-back="false" title="请假填写"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
    <u-sticky>
      <u-tabs :list="list" :is-scroll="false" :current="current" height="96" active-color="#3296FA"
        inactive-color="#999" bar-width="375" bar-height="1" @change="change"></u-tabs>
      <view style="height: 1px; background: #F5F7F9; width: 100%; ;">
      </view>
    </u-sticky>
    <view v-if="current == 0">
      <picker :range="tpAry" mode="selector" @change="typeChange">
        <view class="input_set x-row" style="border: 0;">
          <view class="x-col-center lefttext">
            <text>*</text>请假类型
          </view>
          <input type="text" placeholder="请选择" v-model="form.type_name"
            class="x-col-center x-col inputs" disabled />
          <u-icon name="arrow-right" color="#979797" size="26">
          </u-icon>
          <!-- <u-select v-model="show" :list="lists" @confirm="confirm"></u-select> -->
        </view>
      </picker>
      <view style="background: #F5F7F9; height: 16upx;">
      </view>
      <view class="input_set x-row">
        <view class="x-col-center lefttext">
          <text>*</text>开始时间
        </view>
        <input type="text" placeholder="请选择" v-model="form.fBeginTime"
          class="x-col-center x-col inputs" disabled @click="start_cl" />
        <u-icon name="arrow-right" color="#979797" size="26">
        </u-icon>
        <u-picker mode="time" @confirm="start_timeComfirm" v-model="start" :params="params">
        </u-picker>

      </view>
      <view class="input_set x-row">
        <view class="x-col-center lefttext">
          <text>*</text>结束时间
        </view>
        <input type="text" placeholder="请选择" v-model="form.fEndTime"
          class="x-col-center x-col inputs" disabled @click="end_cl" />
        <u-icon name="arrow-right" color="#979797" size="26">
        </u-icon>
        <u-picker mode="time" @confirm="end_timeComfirm" v-model="end" :params="params"></u-picker>
      </view>
      <!-- <view class="input_set x-row">
				<view class="x-col-center lefttext"><text>*</text>请假时长</view>
				<input type="text" placeholder="自动计算时长" v-model="form.sucer" class="x-col-center x-col inputs" disabled @click="scuer"/>
			</view>
			<view style="color:rgba(0,0,0,0.3); font-size: 24upx; padding-left: 32upx; line-height: 60upx;">时长将自动计算入考勤统计</view> -->
      <view style="background: #F5F7F9; height: 16upx;">
      </view>
      <view class="input_set" style="border:0; padding-top: 30upx;">
        <view class="x-col-center lefttext">
          <text>*</text>请假事由
        </view>
        <textarea placeholder="请输入请假理由…" v-model="form.fContent " class="textare"></textarea>
      </view>
      <view class="z_button" @click="sureSend">
        <view class="but">提 交</view>
      </view>
    </view>
    <view v-if="current == 1">
      <view class="u-skeleton" style="background: #F5F7F9; height: 16upx;">
      </view>
      <view class="leavelsit" v-for="(li,index) in clist" :key="index">
        <view class="x-row" @click="lacerdata(li)">
          <image :src="$api.UserImg(li.fUserId)" class="portrait u-skeleton-circle">
          </image>
          <view class="x-col">
            <view class="titel u-skeleton-fillet">
              {{li.fUserName}}提交的请假申请 <text class="fr">{{li.create_time}}</text>
            </view>
            <view class="v_disder u-skeleton-fillet">
              请假类型：{{li.fTypeName}}
            </view>
            <view class="v_disder u-skeleton-fillet">
              开始时间：{{li.fBeginTime}}
            </view>
            <view class="v_disder u-skeleton-fillet">
              结束时间：{{li.fEndTime}}
            </view>
            <view class="neix u-skeleton-fillet" :style="{color:$api.getCheck(li.fStatus).color}">
              {{$api.getCheck(li.fStatus).name}}
            </view>
          </view>
          <!-- <u-button type="primary" class="resetSave">重新提交</u-button> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false
      },
      start: false, //开始时间
      end: false, //结束时间
      list: [
        {
          name: '我要请假'
        },
        {
          name: '请假记录'
        }
      ],
      form: {
        fType: 1,
        type_name: '',
        fBeginTime: '',
        fEndTime: '',
        fContent: ''
      },
      show: false,
      current: 0,
      lists: [
        {
          value: '1',
          label: '江'
        },
        {
          value: '2',
          label: '湖'
        }
      ],
      qjAry: ['事假', '年假', '病假'],

      clist: [],
      isAllList: 1,
      page: 10,
      status: 'loading',
      loading: true,

      tpAry: ['事假', '年假', '病假']
    }
  },
  onLoad() {
    this.getList()
  },
  onReachBottom() {
    if (this.isAllList != 0 && this.current == 1) {
      this.page += 10
      this.getList()
    }
  },
  methods: {
    defaultData() {
      this.isAllList = 1
      this.page = 10
      this.clist = []
      this.status = 'loading'
      this.loading = true
    },
    getList() {
      let params = {
        PageSize: this.page,
        value: {
          iType: 0,
          Status: 0,
          Key: ''
        }
      }
      this.$axios('api/WorkLeave/ListPaged', 'post', params).then(res => {
        this.clist = res.Value.List
      })
    },

    sureSend() {
      let that = this,
        f = this.form,
        txt = ''
      if (!f.fType) txt = '请选择请假类型'
      else if (!f.fBeginTime) txt = '请选择开始时间'
      else if (!f.fEndTime) txt = '请选择结束时间'
      else if (!f.fContent) txt = '请输入请假理由'
      if (txt) {
        uni.showToast({
          title: txt,
          icon: 'none'
        })
        return
      }
      // item.type=f.type;
      // item.fBeginTime=f.fBeginTime+":00";
      // item.fEndTime=f.fEndTime+":00";
      // item.content=f.content;
      this.$axios('api/WorkLeave/AddDetail', 'post', { value: f }).then(res => {
		  
		  if (!res.Success) {
		    uni.showToast({
		      title: '提交失败：'+res.Message,
		      icon: 'none',
		      duration: 2000
		    })
		    return false
		  }
		  
        that.defaultData()
        that.getList()
        that.current = 1
        setTimeout(function () {
          uni.showToast({
            title: '提交成功'
          })
        }, 500)
      })
    },
    typeChange(e) {
      this.form.type_name = this.tpAry[e.detail.value]
      this.form.fType = e.detail.value + 1
    },
    change(e) {
      if (e == 1) {
        this.defaultData()
        this.getList()
      }
      this.current = e
    },
    start_timeComfirm(e) {
      this.form.fBeginTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
    },
    end_timeComfirm(e) {
      this.form.fEndTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
    },
    start_cl() {
      this.start = true
    },
    end_cl() {
      this.end = true
    },
    //请假详情
    lacerdata(e) {
      uni.navigateTo({
        url: './leavedata?id=' + e.fId
      })
    }
  },
  mounted() {}
  //onHide:{},  //监听页面隐藏
  //onUnload:{},	//监听页面卸载
  //onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
  //onReachBottom:{}, //页面滚动到底部
  //onShareAppMessage:{}, 用户点击右上角分享
}
</script>

<style scoped>
.resetSave {
  font-size: 24rpx;
  margin-right: 20rpx;
  height: 70rpx;
}
.input_set {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.inputs {
  display: block;
  text-align: right;
  color: #666;
  height: 100upx;
  padding-right: 10upx;
}

.lefttext {
  color: #34404a;
  font-size: 32upx;
}

.lefttext text {
  color: #f00;
  font-size: 30upx;
  display: inline-block;
  padding-right: 5upx;
}

.textare {
  color: #666;
  font-size: 26upx;
  padding-top: 20upx;
  padding-left: 20upx;
}

.z_button {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: calc(100rpx + env(safe-area-inset-bottom));
  left: 0;
  z-index: 1;
  background: #fff;
  line-height: 100upx;
  background: #fff;
}

.but {
  width: 90%;
  background: #007aff;
  border-radius: 20upx;
  text-align: center;
  line-height: 85upx;
  margin-top: 8upx;
  margin: auto;
  color: #fff;
  font-size: 32upx;
}

.leavelsit {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding: 32upx 0;
}

.portrait {
  width: 65upx;
  height: 65upx;
  border-radius: 65upx;
  display: block;
  margin: 0 32upx;
}

.titel {
  color: #34404a;
  font-size: 32upx;
  padding-bottom: 10upx;
}

.titel text {
  padding-right: 32upx;
  color: #999;
  font-size: 24upx;
}

.v_disder {
  color: #979797;
  font-size: 26upx;
  margin-top: 10upx;
}

.neix {
  padding-top: 15upx;
  font-size: 26upx;
}
</style>
